<template>
	<div>

		<!-- 
			我们原来js、jQuery操作Dom元素的时候，习惯
			$('id').
			document.getElementById('id')
			但是Vue不希望你直接操作Dom元素，他允许你给元素添加ref，然后
			this.$refs即可拿到Dom元素

			如果是给VC组件一个ref，那么获取到的就是VC对象
			组件之间的通信的时候 太重要了。
		 -->

		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>
